<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-common/taglibs.jsp" />
<c:if test="${hasErrors}"><meta id="error"></c:if>

<script type="text/javascript">
   $(document).ready(function () {
      $("#btnUpdateInfo").jqxButton({ theme: getSowTheme('ui-redmond') });
      var theme = getSowTheme('ui-redmond');
      $("#jqxCheckBox").jqxCheckBox({
         width: 20,
         height: 20,
         boxSize: 15,
         theme: theme,
         checked: <c:choose><c:when test="${clientForm.status}">true</c:when><c:otherwise>false</c:otherwise></c:choose>
      });
      
      $("#jqxCheckBox").bind('change', function (event) {
         var checked = event.args.checked;
         if (checked) {
            $("input[name='status']").attr('checked', true);
         }
         else {
            $("input[name='status']").attr('checked', false);
         }
      });
   });
</script>

<form:form name="clientForm" commandName="clientForm">
<form:hidden path="id"/>

<table class="form">
<tr>
   <td>Name:</td>
   <td>
      <form:input path="name" maxlength="100" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="name" cssStyle="color:red" />
   </td>
   <td width="20px" rowspan="2">&nbsp;</td>
   <td>Status:</td>
   <td><div id='jqxCheckBox'></div><form:checkbox path="status" value="Y" cssStyle="display: none" /></td>
   <td width="20px" rowspan="2">&nbsp;</td>
   <td width="20px" rowspan="1">&nbsp;</td>
</tr>
<tr>
   <td>Contact Email:</td>
   <td>
      <form:input path="email" maxlength="50" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /><br>
      <form:errors path="email" cssStyle="color:red" />
   </td>
   <td>Contact Phone:</td>
   <td>
      <form:input path="phone" maxlength="20" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /><br>
      <form:errors path="phone" cssStyle="color:red" />
   </td>
   <td><input id="btnUpdateInfo" type="button" value="Update" onclick="updateProfile()" style="cursor: pointer;" /></td>
</tr>
</table>

</form:form>